import React, { useState, useCallback } from "react";
import { themes, Theme } from "../themes/themes";
import { Link } from "react-router-dom";
import "./index.css";
import LeftVideo from "../LeftVideo/LeftVideo";
import RightButton from "../RightButton/RightButton";
import Danmaku from "../Danmaku/Danmaku";
import LeftSection from "../LeftSection/leftSection";

// 定义视频类型
interface Video {
  src: string;
  id: string;
}

// 定义弹幕类型
interface DanmakuItem {
  id: string;
  text: string;
}

const ThemeSwitcher: React.FC = () => {
  // 视频相关状态
  const [currentVideoIndex, setCurrentVideoIndex] = useState<number>(0);
  const videos: Video[] = [
    { src: "src/videos/one.mp4", id: "video-1" },
    { src: "src/videos/two.mp4", id: "video-2" },
  ];

  // 主题相关状态
  const [currentTheme, setCurrentTheme] = useState<keyof typeof themes>("light");

  // 弹幕相关状态
  const [danmakuText, setDanmakuText] = useState<string>("");
  const [danmakuList, setDanmakuList] = useState<DanmakuItem[]>([]);

  // 视频切换处理
  const handleVideoSwitch = useCallback(() => {
    setCurrentVideoIndex((prevIndex) => (prevIndex === 0 ? 1 : 0));
  }, []);

  // 主题切换处理
  const toggleTheme = useCallback(() => {
    const newTheme = currentTheme === "light" ? "dark" : "light";
    setCurrentTheme(newTheme);
    
    const root = document.documentElement;
    const theme: Theme = themes[newTheme];
    
    // 批量更新CSS变量
    const cssVariables = {
      "--background-image": `url(${theme.backgroundImage})`,
      "--box-color": theme.boxColor,
      "--text-color": theme.textColor,
    };
    
    Object.entries(cssVariables).forEach(([key, value]) => {
      root.style.setProperty(key, value);
    });
  }, [currentTheme]);

  // 弹幕提交处理
  const handleDanmakuSubmit = useCallback(() => {
    if (danmakuText.trim()) {
      const newDanmaku: DanmakuItem = {
        id: `danmaku-${Date.now()}`,
        text: danmakuText.trim(),
      };
      setDanmakuList((prev) => [...prev, newDanmaku]);
      setDanmakuText("");
    }
  }, [danmakuText]);

  // 弹幕动画结束处理
  const handleDanmakuAnimationEnd = useCallback((id: string) => {
    setDanmakuList((prev) => prev.filter((item) => item.id !== id));
  }, []);

  // 弹幕输入处理
  const handleDanmakuInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    setDanmakuText(e.target.value);
  }, []);

  return (
    <div className="theme-switcher-container">
      <div className="theme-controls">
        <button 
          onClick={toggleTheme}
          className="theme-toggle-button"
        >
          切换到 {currentTheme === "light" ? "暗色" : "亮色"} 主题
        </button>

        <Link to="/3d" className="exhibition-link">
          <span className="Three">3D展览馆</span>
        </Link>
      </div>

      <div className="Left">
        <LeftSection />
      </div>

      <div className="video-and-danmaku">
        <div className="Righttop" style={{ position: "relative" }}>
          <LeftVideo videoSrc={videos[currentVideoIndex].src} />
          <RightButton onClick={handleVideoSwitch} />
          
          <div className="danmaku-container">
            {danmakuList.map((danmaku) => (
              <Danmaku
                key={danmaku.id}
                text={danmaku.text}
                onAnimationEnd={() => handleDanmakuAnimationEnd(danmaku.id)}
              />
            ))}
          </div>
        </div>

        <div className="danmaku-input-container">
          <input
            type="text"
            value={danmakuText}
            onChange={handleDanmakuInput}
            placeholder="输入弹幕内容"
            className="danmaku-input"
          />
          <button 
            onClick={handleDanmakuSubmit}
            className="danmaku-submit-button"
          >
            发布弹幕
          </button>
        </div>
      </div>
    </div>
  );
};

export default ThemeSwitcher;
